<template>
  <div class="form-setting-panel">
    <!-- start 标题 -->
    <form-title-setting
      :field="field"
      :mode="mode"
      :setting="setting"
      @input="updateForDom"
    ></form-title-setting>
    <!-- end 标题 -->

    <!-- start 描述信息 -->
    <form-describe-setting
      :field="field"
      :mode="mode"
      @input="updateForDom"
    ></form-describe-setting>
    <!-- end 描述信息 -->

    <!-- start 校验 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{$t('common.base.check')}}</h4>
      <div class="form-item-box">
        <!-- 必填 -->
        <form-required-setting
          :field="field"
          @input="update"
        ></form-required-setting>
      </div>
    </div>
    <!-- end 校验 -->

    <!-- start 选项 -->
    <div class="form-setting-options form-setting-group">
      <h3>{{$t('common.base.option')}}</h3>
      <div class="form-select-setting-operation">
        <button type="button" class="btn-text" @click="open">{{$t('common.base.configurationOption')}}</button>
      </div>
      <div>
        <el-checkbox
          v-if="isMultiOptions"
          :disabled="!!field.id"
          :value="!!field.setting.isMulti"
          @input="update($event, 'isMulti', true)">{{$t('common.base.multiple')}}
        </el-checkbox>
      </div>
      <div>
        <el-checkbox
          :disabled="!!field.id"
          :value="!!field.setting.checkStrictly"
          @input="update($event, 'checkStrictly', true)"
        >
          {{ $t('common.form.setting.supportCheckingAnyLevel')}}
        </el-checkbox>
      </div>
      <h4 class="form-item-title mar-b-0 mar-t-12">
        {{ $t('common.form.setting.displayModeSetting.des1') }}
      </h4>
      <div>
        <el-radio
          class="mar-r-24"
          v-model="displayMode"
          :label="1"
          @input="update($event, 'displayMode', true)"
        >{{ $t('common.form.preview.cascader.showCheckNode') }}</el-radio>
        <el-radio
          v-model="displayMode"
          :label="2"
          @input="update($event, 'displayMode', true)"
        >{{ $t('common.form.preview.cascader.showParentChildNode') }}</el-radio>
      </div>
    </div>
    <!-- end 选项 -->

    <!-- start 字段权限 -->
    <div class="form-setting-group form-setting-item" v-if="!isServiceProviderFlag">
      <h4 class="form-item-title">{{$t('common.base.fieldPermissions')}}</h4>
      <div class="form-item-box">
        <!-- 移动端列表展示 -->
        <mobile-show-setting
          v-if="isTaskMode || isOnlyEventMode || isOnlyProductMode"
          :field="field"
          :fields="fields"
          :is-event-mode="isEventMode"
          @input="update"
        ></mobile-show-setting>
        <!-- 可见性 -->
        <form-visible-setting
          :field="field"
          @input="update"
        ></form-visible-setting>
        <!-- 支持高级搜索 -->
        <form-search-setting
          :field="field"
          @input="update"
          v-if="!isTaskCardForm"
        ></form-search-setting>
        <!-- 是否对客户可见 -->
        <form-visible-customer-setting :field="field" @input="update" v-if="isShowVisibleCustomer"></form-visible-customer-setting>
      </div>
    </div>
    <!-- end 字段权限 -->

    <!-- start 其他设置 -->
    <div class="form-setting-group form-setting-item" v-if="allowPublicSet">
      <h4 class="form-item-title">{{$t('common.base.otherSet')}}</h4>
      <div class="form-item-box">
        <!-- 设为公用字段 -->
        <form-public-setting
          :field="field"
          @input="update"
        ></form-public-setting>
      </div>
    </div>
    <!-- end 其他设置 -->
  </div>
</template>

<script>
import SettingMixin from '@src/component/form/mixin/setting';
import Cascader from './components/index';
import { settingProps } from '@src/component/form/components/props';
import { getMainLanguageKey } from '@hooks/useFormMultiLanguage'
import i18n from '@src/locales'
import _ from 'lodash'

export default {
  name: 'form-cascader-setting',
  mixins: [SettingMixin],
  props: settingProps,
  data() {
    return {
      displayMode: this.field.setting.displayMode,
    };
  },
  computed: {
    isMultiOptions() {
      return ['task', 'task_receipt', 'task_card', 'event', 'event_card', 'product', 'customer'].includes(this.mode)
    }
  },
  methods: {
    updateForDom(event) {
      let el = event.target;
      let prop = el.dataset.prop;
      let value = el.value;

      this.update(value, prop);
    },
    update(value, prop, isSetting = false) {
      this.$emit('input', { value, prop, isSetting });
    },
    updateMulti(event, value){
      console.log(event, value)
    },
    open() {
      let source = this.field.setting.dataSource || [];
      let maxDeep = this.field.setting.maxDeep || 2;
      let defaultValue = (this.field.defaultValue && this.field.defaultValue.split(',')) || [];
      let dataSourceLanguage = this.field.setting.dataSourceLanguage;
      if(!dataSourceLanguage && source?.length) {
        const manLa = getMainLanguageKey()
        dataSourceLanguage = {}
        dataSourceLanguage[i18n.locale] = _.cloneDeep(source)
        dataSourceLanguage[manLa] = _.cloneDeep(source)
      }
      const setting = {
        data: source,
        maxDeep,
        defaultValue,
        dataSourceLanguage: dataSourceLanguage || {},
        field: this.field,
        mode: this.mode,
        props: {
          canSetDefault: !this.field.setting?.isMulti, // 当前需求多家菜单是多选的情况下不能设置默认值
          checkStrictly: !!this.field.setting?.checkStrictly, // 需求默认允许选择任意层级
        }
      };
      Cascader.setting(setting).then(result => {
        if (result.status == 0) {
          this.field.setting.dataSource = result.data.dataSource;
          this.field.setting.maxDeep = result.data.maxDeep;
          this.field.defaultValue = result.data.defaultValue.join(',');
          this.field.setting.dataSourceLanguage = result.data.dataSourceLanguage;
        }
      });
    },
  },
};
</script>
